//响应式原理的简易实现

// 对象响应化：遍历每个key，定义getter、setter
function observe(obj) {
    if (typeof obj !== 'object' || obj == null) {
        return
    }
    Object.keys(obj).forEach(element => {
        defineReactive(obj, element, obj[element])
    });
}
function set(obj, key, val) {
    defineReactive(obj, key, val)
}
function defineReactive(obj, key, val) {
    //递归
    observe(val)
    //对传入的obj进行拦截访问
    Object.defineProperty(obj, key, {
        get() {
            console.log(`get ${key}:${val}`);
            return val
        },
        set(newVal) {
            if (newVal != val) {
                //如果传入的newVal依旧是对象，也需要做响应化处理
                observe(newVal)
                console.log(`set ${key}:${newVal}`);
                val = newVal
            }
        }
    })
}
const obj = { foo: 'foo', bar: 'bar', baz: { a: 1 }, arr: [1, 2, 3] }
observe(obj)
obj.foo  //get操作
obj.foo = "Foooooooooo"  //set操作
obj.bar
obj.bar = "Barrrrrrrr"
// obj.baz.a = 10   //需要解决嵌套问题

obj.baz = { a: 100 }   //解决赋值是嵌套的问题
obj.baz.a


// 如果添加/删除了新属性无法检测
obj.dong = 'dong'
obj.dong
set(obj, 'dong', 'dong')
obj.dong

//Object.defineProperty()对数组无效,分析：改变数组方法只有7个
obj.arr.push(4)




